import * as React from 'react';
import {useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import SplashScreen from 'react-native-splash-screen'
import Home from './tabs/Home';
import Profiles from './tabs/Profiles';
import Messages from './tabs/Messages';
import Contacts from './tabs/Contacts';
import Discover from './tabs/Discover';
import {Image, useColorScheme} from 'react-native';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reducer from './reducers/Reducer';

const Tab = createBottomTabNavigator();

let iconArr = {
  Home_icon_Default: require('./assets/image/Home_icon_Default.png'),
  Home_icon_Selected: require('./assets/image/Home_icon_Selected.png'),
  Messages_icon_Default: require('./assets/image/Messages_icon_Default.png'),
  Messages_icon_Selected: require('./assets/image/Messages_icon_Selected.png'),
  Contacts_icon_Default: require('./assets/image/Contacts_icon_Default.png'),
  Contacts_icon_Selected: require('./assets/image/Contacts_icon_Selected.png'),
  Discover_icon_Default: require('./assets/image/Discover_icon_Default.png'),
  Discover_icon_Selected: require('./assets/image/Discover_icon_Selected.png'),
  Profiles_icon_Default: require('./assets/image/Profiles_icon_Default.png'),
  Profiles_icon_Selected: require('./assets/image/Profiles_icon_Selected.png'),
};

function Ionicons({name, focused, color, size}) {
  return (
    <Image
      source={iconArr[name + '_icon_' + (focused ? 'Selected' : 'Default')]}
    />
  );
}

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  useEffect(() => {
    SplashScreen.hide();
  }, []);

  return (
    <Provider store={createStore(reducer)}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => (
              <Ionicons
                name={route.name}
                focused={focused}
                size={size}
                color={color}
              />
            ),
            tabBarActiveTintColor: '#29DAD7',
            tabBarInactiveTintColor: isDarkMode ? '#4E586E' : 'gray',
          })}>
          <Tab.Screen
            name="Home"
            component={Home}
            options={
              {
                // header: props => <SearchHeader />,
              }
            }
          />
          <Tab.Screen name="Messages" component={Messages} />
          <Tab.Screen name="Contacts" component={Contacts} />
          <Tab.Screen name="Discover" component={Discover} />
          <Tab.Screen name="Profiles" component={Profiles} />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>
  );
};
export default App;
